<template>
  <div>
    <form action="/">
      <van-search
        v-model.trim="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        shape="round"
        @input="print"
      />
    </form>
    <!-- 初始部分 -->
    <div v-if="current == 'init'" class="init">
      <!-- 搜索历史记录 -->
      <div class="historybox">
        <div class="searchtitle" >
          <!-- 清空历史记录框框未实现,显示length未定义 -->
          <!-- v-if="info.historyData.length" -->
          <span>历史记录</span>
          <van-icon name="delete-o" class="delicon" @click="del" />
        </div>
        <div class="history">
          <div v-for="item in info.historyData" :key="item.id">
            <div class="historykeyword">{{ item.keyword }}</div>
          </div>
        </div>
      </div>
      <!-- 热门搜索 -->
      <div class="historybox">
        <p class="searchtitle">热门搜索</p>
        <div class="history">
          <div v-for="item in info.hotKeywordList" :key="item.id">
            <div class="historykeyword">{{ item.keyword }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索提示部分 -->
    <div v-else-if="current == 'notice'" class="notice">
      <div
        v-for="item in tip"
        :key="item.id"
        @click="goGoods(item.name)"
        class="tips"
      >
        <p class="tipslist">
          {{ item.name }}<van-icon name="arrow" class="tipicon" />
        </p>
      </div>
    </div>
    <!-- 商品展示 -->
    <div v-else class="goods">
      <router-link :to="`/category/list/info/${item.id}`" tag="div" v-for="item in goods" :key="item.id" class="goodslist">
        <img :src="item.list_pic_url" alt="" />
        <p class="goodsname">{{ item.name }}</p>
        <p class="goodsprice">￥{{ item.retail_price }}</p>
      </router-link>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  indexaction,
  helperaction,
  addhistoryaction,
  clearhistoryAction,
} from "@/api/home/search/index";
export default {
  data() {
    return {
      value: "",
      current: "init",
      info: {},
      tip: [],
      goods: [],
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    // onCancel() {
    //   Toast("取消");
    // },
    print() {
      if (!this.value) {
        this.current = "init";
        return;
      }
      this.current = "notice";
      helperaction({
        keyword: this.value,
        order: "",
      }).then((res) => {
        console.log(res);
        this.tip = res.keywords;
      });
    },
    //搜索之后的商品界面
    goGoods(val) {
      this.current = "goods";
      helperaction({
        keyword: val,
        order: "",
      }).then((res) => {
        console.log(res);
        this.goods = res.keywords;
      });
      addhistoryaction({
        keyword: val,
        openId: localStorage.getItem("openId"),
      });
    },
    async init() {
      var res = await indexaction({
        openId: localStorage.getItem("openId"),
      });
      console.log(res);
      this.info = res;
    },
    del() {
      clearhistoryAction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.init();
      });
    },
  },
  async created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.init {
  background-color: #f8f8f8;
  .historybox {
    margin: 41px 0px 0px 0px;
    // height: 266px;
    background-color: #fff;
    .searchtitle {
      .delicon {
        position: absolute;
        right: 39px;
      }
      font-size: 26px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      padding-top: 42px;
      margin: 0px 39px;
      position: relative;
    }
    .history {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 0px 39px;
      .historykeyword {
        border: 1px solid rgba(226, 226, 226, 1);
        font-size: 20px;
        color: #666666;
        font-weight: 400;
        padding: 10px 20px;
        margin-right: 10px;
        white-space: nowrap;
        margin-top: 28px;
      }
    }
  }
}
.notice {
  margin-top: 41px;
  .tips {
    height: 93px;
    border-top: 1px solid #f5f5f5;
    line-height: 93px;
    .tipslist {
      font-size: 26px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
      margin-left: 52px;
      position: relative;
      .tipicon {
        position: absolute;
        right: 32px;
        line-height: 93px;
      }
    }
  }
}
.goods {
  .goodslist {
    margin-left: 22px;
    img {
      width: 350px;
      height: 350px;
    }
    .goodsname {
      font-size: 26px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
    }
    .goodsprice {
      font-size: 26px;
      color: #9e4242;
      letter-spacing: 0;
      font-weight: 400;
      margin-top: 5px;
    }
  }
}
</style>